<template>
<div>
    <div>
      <el-button @click="priceTop">升序</el-button>
      <el-button @click="priceDown">降序</el-button>
    </div>
  <div class="demo_container">
    <div class="demo_container_i" v-for="(item,index) in this.list" :key="index">
      <div class="img_item">
        <img :src="item.productImage" >
      </div>
      <div class="item_desc">
        <div>{{item.salePrice}}</div>
        <div>{{item.productName}}</div>
        <div>
          <el-button @click="addcart(item)">加入购物车</el-button>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      list:[]
    }
  },
  mounted(){
    this.$store.dispatch("GATADATA");
    this.list = this.$store.state.data3.filter(el=>{
      console.log(el.salePrice)
      return el.salePrice>1000 && el.salePrice<=2000
    })
  },
  methods:{
    addcart(item){
      this.$store.commit("ADDCART",item)
    },
    priceTop(){
      this.list.sort((a,b)=>{
        return b.salePrice-a.salePrice
      })
    },
    priceDown(){
      this.list.sort((a,b)=>{
        return a.salePrice-b.salePrice
      })
    }
  }
}
</script>

<style scoped>
.demo_container
{
  width: 100%;
  height: 100%;
  display: inline-flex;
  justify-content: flex-start;
}

.demo_container_i
{
  width: 200px;
  height: 380px;
  border: 1px solid #ddd;
  transition: all 1s;
  margin: 0 5px;
}

.demo_container_i:hover
{
  transform:scale(1.01) ;
  box-shadow: 2px 2px 4px 7px #fff;
}

.item_desc
{
  width: 100%;
  height: 50%;
  display: inline-flex;
  /* justify-content: center; */
  flex-direction: column;
  align-items: center;
}

.item_desc >div
{
  flex: 1;
}

.img_item
{
  width: 100%;
}

.img_item img
{
  width: 200px;
  height: 200px;
}
</style>